<!DOCTYPE html>
<html>
<head>
    <title>Fig. 6.1</title>
</head>
<body>
    <canvas id="physicsCanvas" width="700" height="400" style="border:1px solid #000;"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style and Parameters ---
        ctx.lineWidth = 1.5;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        const chargeRadius = 4.5;
        const arrowHeadSize = 8;
        const dashPattern = [5, 5];

        // --- Coordinates ---
        const yMain = 150;
        const yLabel = 80;
        const yDimX = 210;
        const yDimTotal = 280;

        const xA = 100;
        const xB = 600;
        const xP = xA + (xB - xA) * 0.35; // Position of P

        // --- Helper function for double-headed arrow ---
        function drawDoubleArrow(ctx, x1, y1, x2, y2) {
            ctx.save();
            ctx.lineWidth = 1;
            ctx.beginPath();
            // Line
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            // Arrow head at start
            ctx.moveTo(x1 + arrowHeadSize, y1 - arrowHeadSize * 0.5);
            ctx.lineTo(x1, y1);
            ctx.lineTo(x1 + arrowHeadSize, y1 + arrowHeadSize * 0.5);
            // Arrow head at end
            ctx.moveTo(x2 - arrowHeadSize, y2 - arrowHeadSize * 0.5);
            ctx.lineTo(x2, y2);
            ctx.lineTo(x2 - arrowHeadSize, y2 + arrowHeadSize * 0.5);
            ctx.stroke();
            ctx.restore();
        }

        // --- Main Drawing Logic ---

        // 1. Charges and Point P
        // Charge A
        ctx.beginPath();
        ctx.arc(xA, yMain, chargeRadius, 0, 2 * Math.PI);
        ctx.fill();

        // Charge B
        ctx.beginPath();
        ctx.arc(xB, yMain, chargeRadius, 0, 2 * Math.PI);
        ctx.fill();

        // Point P
        ctx.beginPath();
        ctx.arc(xP, yMain, chargeRadius, 0, 2 * Math.PI);
        ctx.fill();

        // 2. Labels
        ctx.font = '22px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        // Label for Charge A
        ctx.fillText('charge A', xA - 40, yLabel);
        ctx.beginPath();
        ctx.moveTo(xA - 15, yLabel + 5);
        ctx.lineTo(xA, yMain - chargeRadius);
        ctx.stroke();

        // Label for Charge B
        ctx.fillText('charge B', xB + 40, yLabel);
        ctx.beginPath();
        ctx.moveTo(xB + 10, yLabel + 5);
        ctx.lineTo(xB, yMain - chargeRadius);
        ctx.stroke();

        // Label for Point P
        ctx.fillText('P', xP, yMain - 20);

        // 3. Dashed lines
        ctx.save();
        ctx.setLineDash(dashPattern);
        ctx.lineWidth = 1;
        
        // Horizontal line
        ctx.beginPath();
        ctx.moveTo(xA, yMain);
        ctx.lineTo(xB, yMain);
        ctx.stroke();

        // Vertical lines for dimensions
        ctx.beginPath();
        // From A
        ctx.moveTo(xA, yMain);
        ctx.lineTo(xA, yDimTotal);
        // From P
        ctx.moveTo(xP, yMain);
        ctx.lineTo(xP, yDimX);
        // From B
        ctx.moveTo(xB, yMain);
        ctx.lineTo(xB, yDimTotal);
        ctx.stroke();
        
        ctx.restore();

        // 4. Dimension indicators
        ctx.font = '20px Arial';
        ctx.textBaseline = 'middle';

        // Dimension 'x'
        drawDoubleArrow(ctx, xA, yDimX, xP, yDimX);
        ctx.fillText('x', (xA + xP) / 2, yDimX - 20);

        // Dimension '10.0 cm'
        drawDoubleArrow(ctx, xA, yDimTotal, xB, yDimTotal);
        ctx.fillText('10.0 cm', (xA + xB) / 2, yDimTotal + 20);

        // 5. Figure label
        ctx.font = 'bold 20px Arial';
        ctx.fillText('Fig. 6.1', canvas.width / 2, canvas.height - 20);

    </script>
</body>
</html>